import { Layout, Row, Col, Button, Divider} from "antd"
import {
    AppstoreOutlined,
    ApartmentOutlined,
    ClusterOutlined,
    DeploymentUnitOutlined,
    BarChartOutlined,
  } from '@ant-design/icons';
import React from "react";
import Searchbar from "./Searchbar"
import Toolbar from "./Toolbar"
import GraphContainer from "../graph/GraphContainer"
import Sidebar from "./Sidebar"
const { Header, Content, Footer, Sider } = Layout;


export class Studio extends React.Component {

    render() {
        return (
            <Layout>
                <Header style={{ height: 38, backgroundColor: "#FFFFFF", borderBottom: "1px solid rgba(0,0,0,.08)",  lineHeight: "36px",zIndex: 10, padding: "0 10px" }} >
                    <Row>
                        <Col span="6">Graph Studio</Col>
                        <Col span="18" style={{ height: 36, textAlign: "right" }}>

                            <Divider type="vertical" height="30" />

                            <Toolbar />

                            <Searchbar />

                        </Col>
                    </Row>
                </Header>

                <Layout style={{ paddingTop: 10, backgroundColor: "#FFFFFF"}}>
                    <GraphContainer width={ window.innerWidth } height={ window.innerHeight - 55 } />
                </Layout>

                <Sidebar />
            </Layout>
        )
    }// render


}


